<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>角色管理 - 权限管理系统</title>
    <base href="${pageContext.request.contextPath}/">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
    <header>
        <h1>角色管理</h1>
        <nav>
            <a href="index.jsp">首页</a>
            <a href="pages/user-list.jsp">用户管理</a>
        </nav>
    </header>

    <div class="content">
        <!-- 角色查询 -->
        <div class="search-section">
            <h2>角色详情查询</h2>
            <div class="form-group">
                <input type="text" id="roleId" placeholder="角色ID">
                <input type="text" id="roleKey" placeholder="角色名称">
                <button type="button" onclick="getRoleWithMenus()" class="btn-primary">查询角色详情</button>
            </div>
        </div>

        <!-- 角色详情显示 -->
        <div class="result-section">
            <div id="roleDetailResult">
                <div class="info-tip">请输入角色ID或角色名称查询详情</div>
            </div>
        </div>

        <!-- 示例角色列表 -->
        <div class="sample-section">
            <h2>系统预定义角色</h2>
            <div class="sample-roles">
                <div class="sample-role-card" onclick="loadRoleById(1)">
                    <div class="role-icon">👑</div>
                    <h3>管理员角色</h3>
                    <p><strong>ID:</strong> 1</p>
                    <p><strong>描述:</strong> 英雄角色，拥有所有权限</p>
                    <div class="role-stats">
                        <span class="stat">菜单: 9个</span>
                        <span class="stat">权限: 全部</span>
                    </div>
                    <button type="button" class="btn-primary">查看详情</button>
                </div>
                <div class="sample-role-card" onclick="loadRoleById(2)">
                    <div class="role-icon">👤</div>
                    <h3>客户角色</h3>
                    <p><strong>ID:</strong> 2</p>
                    <p><strong>描述:</strong> 客户角色，基础权限</p>
                    <div class="role-stats">
                        <span class="stat">菜单: 0个</span>
                        <span class="stat">权限: 基础</span>
                    </div>
                    <button type="button" class="btn-primary">查看详情</button>
                </div>
                <div class="sample-role-card" onclick="loadRoleById(3)">
                    <div class="role-icon">💼</div>
                    <h3>销售商角色</h3>
                    <p><strong>ID:</strong> 3</p>
                    <p><strong>描述:</strong> 销售商角色，业务权限</p>
                    <div class="role-stats">
                        <span class="stat">菜单: 0个</span>
                        <span class="stat">权限: 业务</span>
                    </div>
                    <button type="button" class="btn-primary">查看详情</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // 查询角色详情
    async function getRoleWithMenus() {
        const roleId = document.getElementById('roleId').value;
        const roleKey = document.getElementById('roleKey').value;

        if (!roleId && !roleKey) {
            alert('请输入角色ID或角色名称');
            return;
        }

        const params = new URLSearchParams();
        params.append('method', 'getRoleWithMenus');
        if (roleId) params.append('roleId', roleId);
        if (roleKey) params.append('roleKey', roleKey);

        try {
            const response = await fetch('role?' + params);
            const result = await response.json();

            if (result.code === 200) {
                const role = result.data;
                const menusHtml = renderMenuTree(role.menus);

                let html = '<div class="role-detail-card">' +
                    '<div class="role-header">' +
                    '<h2>' + role.name + '</h2>' +
                    '<p class="role-description">' + (role.description || '无描述') + '</p>' +
                    '</div>' +
                    '<div class="menus-section">' +
                    '<h3>菜单权限 (' + (role.menus ? role.menus.length : 0) + '个)</h3>' + menusHtml +
                    '</div>' +
                    '</div>';

                document.getElementById('roleDetailResult').innerHTML = html;
            } else {
                document.getElementById('roleDetailResult').innerHTML =
                    '<div class="error-message">' + result.message + '</div>';
            }
        } catch (error) {
            console.error('Error:', error);
            document.getElementById('roleDetailResult').innerHTML =
                '<div class="error-message">查询失败: ' + error.message + '</div>';
        }
    }

    // 渲染菜单树
    function renderMenuTree(menus) {
        if (!menus || menus.length === 0) {
            return '<div class="no-data">暂无菜单权限</div>';
        }

        // 分离父菜单和子菜单
        const parentMenus = [];
        const childMenus = [];

        menus.forEach(function(menu) {
            if (menu.parentId === null || menu.parentId === 0) {
                parentMenus.push(menu);
            } else {
                childMenus.push(menu);
            }
        });

        let html = '<div class="menu-tree">';

        if (parentMenus.length === 0) {
            // 如果没有父菜单，直接显示所有菜单
            menus.forEach(function(menu) {
                html += '<div class="menu-item">' +
                    '<span class="menu-icon">📄</span>' +
                    '<span class="menu-name">' + menu.name + '</span>' +
                    '<span class="menu-url">' + (menu.url || '') + '</span>' +
                    '</div>';
            });
        } else {
            // 有父菜单，按层级显示
            parentMenus.forEach(function(parent) {
                html += '<div class="parent-menu">' +
                    '<div class="menu-item parent">' +
                    '<span class="menu-icon">📁</span>' +
                    '<span class="menu-name"><strong>' + parent.name + '</strong></span>' +
                    '<span class="menu-url">' + (parent.url || '') + '</span>' +
                    '</div>' +
                    '<div class="child-menus">';

                const children = childMenus.filter(function(child) {
                    return child.parentId === parent.id;
                });

                if (children.length > 0) {
                    children.forEach(function(child) {
                        html += '<div class="menu-item child">' +
                            '<span class="menu-icon">➡️</span>' +
                            '<span class="menu-name">' + child.name + '</span>' +
                            '<span class="menu-url">' + (child.url || '') + '</span>' +
                            '</div>';
                    });
                } else {
                    html += '<div class="no-child-menu">暂无子菜单</div>';
                }

                html += '</div></div>';
            });
        }

        html += '</div>';
        return html;
    }

    // 根据ID加载角色
    function loadRoleById(roleId) {
        document.getElementById('roleId').value = roleId;
        document.getElementById('roleKey').value = '';
        getRoleWithMenus();
    }

    // 页面加载时检查URL参数
    document.addEventListener('DOMContentLoaded', function() {
        const urlParams = new URLSearchParams(window.location.search);
        const quickRoleId = urlParams.get('quickRoleId');

        if (quickRoleId) {
            document.getElementById('roleId').value = quickRoleId;
            getRoleWithMenus();
        }
    });
</script>
</body>
</html>